<template>
	<view class="talk-list">
		<view class="talk-item" v-if="item.viewFlag" v-for="(item, index) in dataList" :key="index">
			<view class="talk-box" v-if="item.isParty == '2'">
				<u-avatar class="box-avatar" :src="item.avatar"></u-avatar>
				<view class="talk-box-right">
					<view class="user-info-box">
						<view class="user-info">
							<view class="user-name-box">
								<view class="user-name">{{item.nickName}}</view>
							</view>
							<view class="user-name-box" v-if="my">
								<view class="user-tag-box">
									<view class="user-tag">IP:{{item.city}}</view>
									<u-line length="22rpx" color="#fff" margin="10px" direction="col"></u-line>
								</view>
							</view>
							<view class="user-name-box" v-else>
								<view class="user-tag-box">
									<view class="game-user-tag">{{item.playNum}}人在玩</view>
								</view>
							</view>
						</view>
					</view>
					<view class="party-box">
						<view class="party-logo-box">
							<u-album :urls="item.image.split(',')" :multipleSize="165" :rowCount="1" :maxCount="1" :maxRow="2"></u-album>
							<view class="party-title-box">
								<view class="party-title">{{item.message}}</view>
								<u-rate :disabled="true" :count="5" v-model="item.star"></u-rate>
							</view>
						</view>
						<view @click="addParty(item)" class="party-more">马上体验</view>
					</view>
				
					<!-- <view class="footer-box">
						<view class="talk-time">{{item.time}}</view>
						<view class="toolbar-box">
							<view class="toolbar" @click="chat(item)">
								<u-icon name="pinglun" size="38" custom-prefix="iconfont"></u-icon>
								<view class="toolbar-text">{{item.commentNum}}</view>
							</view>
							<view class="toolbar" @click="thumb(item,index)">
								<u-icon name="aixin" size="40" custom-prefix="iconfont"></u-icon>
								<view class="toolbar-text">{{item.giveNum}}</view>
							</view>
						</view>
					</view> -->
				</view>
			</view>
			
			
			<view class="talk-box" v-else>
				<view class="avatar-box" :class="item.coinLevel > 1 ? 'box-avatar' : ''">
					<u-avatar @click="userCenter(item)" :src="item.avatar"></u-avatar>
					<view class="id-card" v-if="item.idCardStatus == '1'">
						<u-icon name="renzhengguanli" size="48" custom-prefix="iconfont"></u-icon>
					</view>
				</view>
				<view class="talk-box-right">
					<view class="user-info-box">
						<view class="user-info">
							<view class="user-name-box">
								<view class="user-name">{{item.nickName}}</view>
								<view class="sex-box-nv" v-if="item.sex == 1">
									<u-icon name="ziyuan2" custom-prefix="iconfont"></u-icon>
									<view class="age-text">{{item.age}}</view>
								</view>
								<view class="sex-box" v-else>
									<u-icon name="ziyuan3" custom-prefix="iconfont"></u-icon>
									<view class="age-text">{{item.age}}</view>
								</view>
								<view class="vip-box" v-if="item.isPay == '1'">
									<u-icon name="xianxinghuiyuan" custom-prefix="iconfont"></u-icon>
									<view class="vip-text">贵{{item.coinLevel}}</view>
								</view>
								<view class="renzheng-box" v-if="item.official == '1'">
									<u-icon name="yirenzheng" custom-prefix="iconfont"></u-icon>
								</view>
							</view>
							<view class="user-name-box" v-if="my">
								<view class="user-tag-box">
									<view class="user-tag">IP:{{item.city}}</view>
									<u-line length="22rpx" color="#fff" margin="10px" direction="col"></u-line>
								</view>
							</view>
							<view class="user-name-box" v-else>
								<view class="user-tag-box">
									<view class="user-tag">IP:{{item.city}}</view>
									<!-- <u-line length="22rpx" margin="10px" direction="col"></u-line>
									<view class="user-tag">{{item.distance}}km</view> -->
								</view>
							</view>
						</view>
						<view class="menu-box" @click="menuBtn(item)">
							<u-icon name="leimuxigengduo" size="38" color="#82848a" custom-prefix="iconfont"></u-icon>
						</view>
					</view>
					
					<view class="content-box">
						<view class="text-box">
							<rich-text :nodes="item.message"></rich-text>
						</view>
						<rabbit v-if="item.coinLevel > 7"></rabbit>
					</view>
					<view v-if="item.image">
						<view class="image-one" v-if="item.image.split(',').length <= 2">
							<u-album :urls="item.image.split(',')" @preAd="preAd" :locks="item.imageLock" :multipleSize="220" fontSize="large" :rowCount="3" :maxCount="6" :maxRow="2"></u-album>
						</view>
						<view class="image-list" v-else>
							<u-album :urls="item.image.split(',')" @preAd="preAd" :locks="item.imageLock" :multipleSize="165" :rowCount="3" :maxCount="6" :maxRow="2"></u-album>
						</view>
					</view>
					<view class="no-image" v-else></view>
					<view class="tab-box" v-if="item.topicList">
						<block v-for="(tp, index) in item.topicList" :key="index">
							<view class="tag" :id="tp.topicId" @click="tagBtn">#{{tp.title}}#</view>
						</block>
					</view>
					
					<view class="footer-box">
						<view class="talk-time">{{item.time}}</view>
						<view class="toolbar-box">
							<view class="toolbar" @click="chat(item)">
								<u-icon name="pinglun" size="38" custom-prefix="iconfont"></u-icon>
								<view class="toolbar-text">{{item.commentNum}}</view>
							</view>
							<view class="toolbar" @click="thumb(item,index)">
								<u-icon name="aixin" size="40" custom-prefix="iconfont"></u-icon>
								<view class="toolbar-text">{{item.giveNum}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				// 动态数据
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			my: {
				// 是否是自己
				type: Boolean,
				required: false,
				default: function() {
					return false;
				}
			},
		},
		data() {
			return {
				sheetList: [],
			}
		},
		created() {
			this.init();
	    },
		methods: {
			init() {
				
			},
			previewImage(index, imgList) {
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgList, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					indicator: 'number',
					loop: true
				});
			},
			chat(e) {
				if(e.isParty == '2'){
					this.$emit('chat',e);
					return;
				}
				this.judgeLogin((rs) => {
					if(rs.user.phonenumber == null || rs.user.phonenumber == ''){
						this.$store.commit('setPhone', true);
						return;
					}
					if(rs.user.payNum < 1){
						this.$store.commit('setPay', true);
						return;
					}
					this.$emit('chat',e);
					
				});
			},
			menuBtn(item) {
				this.judgeLogin((res) => {
					var userId = res.user.userId;
					this.sheetList = [];
					var jubao = {
						text: '举报',
						tag: 'jubao',
						subText: '广告拉人、扰乱平台秩序等',
					};
					
					var lahei = {
						text: '拉黑',
						tag: 'lahei',
					};
					
					var remove = {
						text: '删除',
						tag: 'remove',
					};
					if(item.userId == userId){
						remove.id = item.id;
						this.sheetList.push(remove);
					}else{
						jubao.userId = item.userId;
						lahei.userId = item.userId;
						this.sheetList.push(jubao);
						this.sheetList.push(lahei);
					}
					this.$emit('menu', this.sheetList);
				});
			},
			userCenter(item) {
				if(this.my){
					return;
				}
				
				this.judgeLogin(() => {
					this.$u.route({
						url: 'packgeMine/pages/center/index',
						params: {
							userId: item.userId,
						}
					});
				});
			},
			tagBtn(e) {
				this.judgeLogin(() => {
					this.$u.route({
						url: 'pages/topic/index',
						params: {
							topicId: e.target.id,
						}
					});
				});
			},
			addParty(e) {
				this.$u.get('/wq/miniGame/getAppId',{
					id: e.userId,
				}).then(res => {
					if(res.data.appId){
						uni.navigateToMiniProgram({
							appId: res.data.appId,
							success: res => {
								 console.log("打开成功", res);
							},
							fail: err => {
								 console.log(err);
							}
						});
					}else{
						uni.previewImage({
							current: 0, //预览图片的下标
							urls: res.data.img, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
							indicator: 'number',
							loop: true
						});
					}
				});
			},
			more(e) {
				this.$emit('chat',e);
			},
			thumb(e,i) {
				this.judgeLogin((rs) => {
					this.$emit('thumb',e,i);
				});
			},
			preAd(run) {
				var _this = this;
				
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						var code = loginRes.code;
						_this.$u.get('/system/config/getAdValue',{
							code: code,
							appId: _this.website.appId
						}).then(res => {
							uni.login({
								provider: 'weixin',
								success: function(e) {
									_this.openImg(e.code, res.data, res.adId, run);
								},
								fail: function() {
									
								}
							});
						});
					},
					fail: function() {
						
					}
				});
			},
			openImg(code,config,adId,run) {
				var adNum = uni.getStorageSync("adNum");
				if(adNum > 0){
					adNum = adNum - 1;
					uni.setStorageSync("adNum", adNum);
					run(true);
					return;
				}
				
				var adFlag = false;
				var content = "观看广告并点击广告下方绿色按钮后再返回，即可解锁资源";
				if("0" == config){
					run(true);
					return;
				}else if("1" == config){
					// 需要点击广告
					adFlag = false;
				}else if("2" == config){
					// 不需要点击广告
					adFlag = true;
					content = "观看广告后，即可解锁资源";
				}else if("3" == config){
					// 需要转发好友
					content = "今日观看广告次数已用完，请转发好友或者群聊，即可解锁5次资源";
				}
				
				var _this = this;
				uni.showModal({
				  title: '提示',
				  content: content,
				  success: (res) => {
				    if (res.confirm) {
						if("3" == config){
							uni.setStorageSync("adClick", false);
							uni.$off('test');
							uni.$on('test', function(res){
								if(res){
									uni.setStorageSync("adNum", 4);
									_this.$store.commit('setCash', false);
									_this.addAdLog(code, "03");
									uni.$off('test');
									run(true);
								}else{
									uni.showModal({
									  title: '您没有转发成功',
									  content: '您没有转发成功，请重新来过',
									  showCancel: false,
									  success: (res) => {
										  run(false);
									  }
									});
								}
							});
							_this.$store.commit('setCash', true);
							return;
						}
						//加载激励广告
						_this.$utils.videoAdInit(adId);
						// 在适合的场景显示插屏广告
						_this.$utils.videoAdShow()
						.then((res) => {
						  if (res) {
							var adClik = uni.getStorageSync("adClick");
							console.log("点击广告"+adClik);
							if(adClik || adFlag){
								if(adClik){
									_this.addAdLog(code, "02");
								}else{
									_this.addAdLog(code, "01");
								}
								run(true);
							}else{
								_this.addAdLog(code, "01");
								uni.showModal({
								  title: '您没有点击绿色按钮',
								  content: '您没有点击绿色按钮，请重新来过',
								  success: (res) => {
									  run(false);
								  }
								});
							}
						  } else {
							console.log('广告提前退出')
							_this.addAdLog(code, "00");
							run(false);
						  }
						})
						.catch((err) => {
							console.log('广告加载失败')
							run(false);
						});  
				    }
				  }
				});
			},
			addAdLog(code, action) {
				this.$u.post('/wq/ad/add',{
					adAction: action,
					appId: this.website.appId,
					code: code,
				}).then(res => {
					
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.talk-list {
		padding: 15px;
		padding-top: 0;
	}
	.talk-item {
		padding-bottom: 20px;
	}
	
	.talk-list .talk-item:last-child::after{
		border-bottom: 0;
	}
	
	.weui-cell {
	  position: relative;
	}
	
	.weui-cell:after {
	    content: " ";
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    height: 1px;
	    border-bottom: 1px solid #e5e5e5;
	    color: #e5e5e5;
	    -webkit-transform-origin: 0 0;
	    transform-origin: 0 0;
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	    z-index: 2;//看情况使用
	}
	
	.user-info-box {
		display: flex;
		align-items: center;
	}
	.user-info {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 40px;
	}
	.user-name {
		font-size: 30rpx;
		margin-right: 5px;
		max-width: 300rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		line-height: 30rpx;
	}
	.user-woman {
		background-color: #dd6161;
		display: flex;
		align-items: center;
		border-radius: 100%;
		padding: 3px;
	}
	
	.user-man {
		background-color: #2b85e4;
		display: flex;
		align-items: center;
		border-radius: 100%;
		padding: 3px;
	}
	.user-name-box {
		display: flex;
		align-items: center;
	}
	.user-tag-box {
		display: flex;
		align-items: center;
	}
	.user-tag {
		font-size: 20rpx;
		color: #82848a;
		line-height: 70rpx;
	}
	.game-user-tag {
		font-size: 24rpx;
		margin-top: 5px;
		color: #82848a;
	}
	.menu-box {
		display: flex;
		padding: 10px;
		padding-right: 0;
	}
	.content-box {
		margin: 10px 0;
		margin-bottom: 0;
	}
	.image-list {
		margin: 10px 0;
	}
	.image-card {
		width: 30%;
		margin: 5px;
	}
	.no-image {
		margin-bottom: 20px;
	}
	.image-one {
		margin-top: 10px;
		margin-bottom: 20px;
	}
	.text-box {
		font-size: 26rpx;
		line-height: 180%;
		white-space: pre-wrap;
	}
	.footer-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.talk-time {
		font-size: 26rpx;
		color: #909399;
	}
	.toolbar-box {
		display: flex;
		align-items: center;
	}
	.toolbar {
		display: flex;
		align-items: center;
		margin-left: 40px;
		color: #4e4e4e;
	}
	.toolbar-text {
		font-size: 26rpx;
		margin-left: 5px;
	}
	.tab-box {
		display: flex;
		margin-bottom: 15px;
	}
	.tag {
		border: 1px solid #6544826b;
		padding: 1px 5px;
		border-radius: 30px;
		font-size: 10px;
		color: #757272;
		margin-right: 10px;
	}
	.sex-box {
		background-color: #2b85e4;
		display: flex;
		color: #fff;
		padding: 2px 5px;
		border-radius: 20px;
		font-size: 8px;
	}
	.sex-box-nv {
		background-color: #fe709f;
		display: flex;
		color: #fff;
		padding: 2px 5px;
		border-radius: 20px;
		font-size: 8px;
	}
	.age-text {
		margin-left: 2px;
	}
	.talk-box {
		display: flex;
		padding-top: 15px;
	}
	.talk-box-right {
		flex: 1;
		padding-left: 10px;
	}
	.vip-box {
		color: #fff;
		margin-left: 5px;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f7ce05;
		padding: 6rpx 10rpx;
		border-radius: 20px;
	}
	.vip-text {
		font-size: 16rpx;
	}
	.renzheng-box {
		margin-left: 5px;
		color: #f7ce05;
		font-size: 30rpx;
	}
	
	.party-box {
		background-color: #f5f5f5;
		padding: 15px;
		border-radius: 5px;
		margin: 15px 0;
		margin-top: 5px;
	}
	.party-logo-box {
		display: flex;
		align-items: center;
	}
	.party-title-box {
		display: flex;
		flex-direction: column;
		margin-left: 15px;
	}
	.party-title {
		margin-bottom: 15px;
		font-size: 28rpx;
		max-width: 300rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3; /* 这里是超出几行省略 */
		overflow: hidden;
	}
	.party-num {
		color: #eb92cd;
		font-size: 26rpx;
	}
	.party-num-read {
		color: #cac8c8;
		font-size: 26rpx;
	}
	.party-more {
		background-color: #eb92cd;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px;
		margin-top: 15px;
		margin-bottom: 0;
		border-radius: 20px;
		font-size: 28rpx;
		//animation: btnScaleAni 3.5s infinite;
	}
	.party-more-read {
		background-color: #eb92cda8;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px;
		margin-top: 15px;
		margin-bottom: 0;
		border-radius: 20px;
		font-size: 28rpx;
	}
	.box-avatar {
		//animation: tofront 3.5s infinite;
	}
	.avatar-box {
		position: relative;
	}
	.id-card {
		position: absolute;
		right: 6px;
		top: 70rpx;
		background-color: #fff;
		width: 20rpx;
		height: 20rpx;
		color: #f7ce05;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	@keyframes btnScaleAni {
	  0%{ transform: scale(.85); opacity: .6; }
	  50%{ transform: scale(1); opacity: 1; }
	  100%{ transform: scale(.85); opacity: .6; }
	}
	
	@keyframes tofront {
	    0% {transform: rotateY(-180deg);}
	    50% {transform: rotateY(0deg);}
	    100% {transform: rotateY(180deg)}
	}
</style>
